<script setup lang="ts">
import { ref, onMounted } from 'vue'
import ArticleApi, { HotArticleVo } from '@/api/article'
import { ArrowUp } from '@element-plus/icons-vue'

const hotArticles = ref<Array<HotArticleVo>>([])

const fetchHotArticles = async () => {
  try {
    const res = await ArticleApi.hotArticleList()
    if (res.success) {
      hotArticles.value = res.items ?? []
    }
  } catch (error) {
    console.error('Failed to fetch hot articles:', error)
  }
}

onMounted(() => {
  fetchHotArticles()
})
</script>

<template>
  <el-affix :offset="50">
    <div class="sidebar">
      <!-- Profile Card -->
      <!-- <div class="profile-card">
        <div class="profile-header">
          <img
            src="@/assets/images/img01.jpg"
            alt="Profile Cover"
            class="profile-cover" />
          <h3 class="profile-title">请别再呼唤我为孤独之人</h3>
        </div>

        <div class="profile-body">
          <p class="profile-subtitle">三更</p>

          <div class="social-links">
            <template v-for="link in socialLinks" :key="link.name">
              <el-tooltip :content="link.tooltip" placement="top">
                <a :href="link.url" target="_blank" class="social-link">
                  <i :class="['fa', link.icon]"></i>
                </a>
              </el-tooltip>
            </template>
          </div>
        </div>
      </div> -->

      <!-- Hot Articles -->
      <div class="hot-articles">
        <div class="hot-articles-header">
          <i class="fa fa-fire"></i>
          热门文章
        </div>
        <div class="hot-articles-body">
          <a
            v-for="article in hotArticles"
            :key="article.id"
            :href="`#/article_detail?id=${+(article.id ?? 0)}`"
            class="hot-article-item"
            target="_blank">
            <h6 class="hot-article-title">{{ article.title }}</h6>
            <small class="hot-article-views">
              <i class="fa fa-eye" style="color: #2196f3"></i>
              {{ article.viewCount }} 次围观
            </small>
          </a>
        </div>
      </div>

      <!-- Scroll to Top -->
      <el-backtop :right="40" :bottom="100" :visibility-height="600">
        <div class="custom-backtop">
          <el-icon><ArrowUp /></el-icon>
        </div>
      </el-backtop>
    </div>
  </el-affix>
</template>

<style lang="scss" scoped>
.sidebar {
  position: relative;
  margin-top: 13px;
}

.profile-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
  transition: transform 0.2s;

  &:hover {
    transform: translateY(-5px);
  }
}

.profile-header {
  position: relative;
  height: 200px;
}

.profile-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-title {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  color: white;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  font-size: 1.5rem;
  padding: 0 1rem;
  margin: 0;
}

.profile-body {
  padding: 24px;
  text-align: center;
}

.profile-subtitle {
  font-size: 1.1rem;
  color: #666;
  margin: 0 0 16px 0;
}

.social-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f5f7fa;
  color: #666;
  text-decoration: none;
  transition: all 0.3s;

  &:hover {
    background: var(--el-color-primary);
    color: white;
    transform: translateY(-3px);
  }
}

.hot-articles {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.hot-articles-header {
  background: var(--el-color-primary);
  color: white;
  padding: 12px 16px;
  font-size: 16px;

  i {
    margin-right: 8px;
  }
}

.hot-articles-body {
  padding: 8px 0;
}

.hot-article-item {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  transition: background-color 0.2s;
  //border-bottom: 1px solid #f5f7fa;
  &:not(:last-child) {
    border-bottom: 1px solid #f5f7fa;
  }
  &:hover {
    background-color: #f5f7fa;
  }
}

.hot-article-title {
  color: #2c3e50;
  font-size: 14px;
  margin: 0 0 4px 0;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hot-article-views {
  color: #909399;
  font-size: 12px;

  i {
    margin-right: 4px;
  }
}

.custom-backtop {
  width: 40px;
  height: 40px;
  background-color: var(--el-color-primary);
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  cursor: pointer;

  &:hover {
    background-color: var(--el-color-primary-dark-2);
    transform: scale(1.1);
  }

  :deep(.el-icon) {
    font-size: 20px;
    color: #fff;
  }
}
</style>
